import {connect} from 'dva';

import './style/index.less';
import {LeftSideBar} from "components/SideBar";
import NavBar from 'components/NavBar';
import { Switch, routerRedux } from 'dva/router';
import $$ from 'utils';
import menuData from "../common/menu";
import BaseComponent from "components/Base/BaseComponent";
import TabsLayout from "./TabsLayout";

@connect(({global}) => ({global}))
export default class BasicLayout extends BaseComponent {

  constructor(props) {
    super(props);

    this.state = {
      hideSideBar: false,
    }
  }

  onCollapseLeftSide = () => {

    this.setState({
      hideSideBar: !this.state.hideSideBar,
    });

    $$.debug('onCollapseLeftSide', this.state.hideSideBar);
  }

  render() {

    const {routerData, global, location, history} = this.props;
    const {hideSideBar} = this.state;
    const {locaPath} = global;
    const { childRoutes } = routerData;

    $$.debug(locaPath, history);
    $$.debug('global', this.getModel('global'));

    return (
      <div className='main'>
        <NavBar onCollapseLeftSide={this.onCollapseLeftSide} hideSideBar={hideSideBar}/>
        <div className='main-contant'>
          <div className='contant'>
            <LeftSideBar locaPath={locaPath} theme="light" menuData={menuData} hideSideBar={hideSideBar}/>
            <div className='right'>
              <div className='right_contant'>
                <TabsLayout childRoutes={childRoutes} location={location} history={history}/>
                {/*<Switch>{childRoutes}</Switch>*/}
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}
